<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font_2232321_pnazpvqupq/iconfont.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #d1d5db;
        }
        .menus {
            height: 90%;
            width: 200px;
            overflow: hidden auto;
            background-color: #1e222d;
            border: 5px solid black;
            border-radius: 5px;
        }
        .menus-list .menus-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            padding: 1px 0 1px 10px;
            font-size: 15px;
            text-decoration: none;
            color: #fff;
        }
        .menus-list .menus-item img {
            width: 25px;
            height: 25px;
        }
        .menus-list .menus-item .menus-text {
            padding: 8px;
        }
        .menus-list .menus-item .iconshang, .menus-list .menus-item .iconxia {
            margin-left: auto;
            margin-right: 6px;
        }
        /* 子菜单项的小圆点 */
        .menus-submenu .menus-list .menus-item::before {
            content: '';
            width: 3px;
            height: 3px;
            margin: auto 11px auto 11px;
            display: inline-block;
            line-height: 5px;
            border-radius: 50%;
            background-color: #fff;
        }

        /* 菜单项hover */
        .menus-list li:hover {
            background-color: #262f3e;
        }
        /* 滚动条 */
        .menus::-webkit-scrollbar {
            width: 7.5px;
            background-color: transparent;
        }
        .menus::-webkit-scrollbar-thumb {
            background-color: #313f5a;
            border-radius: 5px;
        }

        /* 选中项 */
        .menus-list .selected-items, .menus-list .selected-items:hover {
            background-color: #006eff;
        }
        
        /* 子列表 */
        .menus-submenu .menus-list {
            height: 0;
            transform-origin: top;
            transform: rotateX(90deg);
            transition: transform .4s;
            visibility: hidden;
        }
        /* 展开子列表 */
        .menus-submenu.expanded-list, .menus-submenu.expanded-list:hover {
            background-color: #000;
        }
        .menus-submenu.expanded-list .menus-list {
            height: 100%;
            visibility: visible;
            /* 90deg 变为 0deg 相当于垂直平面变为平行于平面 */
            transform: rotateX(0deg);
        }
    </style>
</head>
<body>
    <div class="menus">
        <ul class="menus-list">
            <li class="menus-submenu expanded-list">
                <a href="#" class="menus-item">
                    <img src="./Pikachu.jpeg" alt="icon">
                    <div class="menus-text">菜单项1</div>
                    <i class="iconfont iconxia"></i>
                </a>
                <ul class="menus-list">
                    <li class="selected-items">
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项1</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项2</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项3</div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="menus-submenu">
                <a href="#" class="menus-item">
                    <img src="./Pikachu.jpeg" alt="icon">
                    <div class="menus-text">菜单项2</div>
                    <i class="iconfont iconxia"></i>
                </a>
                <ul class="menus-list">
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项1</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项2</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项3</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项4</div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="menus-submenu">
                <a href="#" class="menus-item">
                    <img src="./Pikachu.jpeg" alt="icon">
                    <div class="menus-text">菜单项3</div>
                    <i class="iconfont iconxia"></i>
                </a>
                <ul class="menus-list">
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项1</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项2</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项3</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项4</div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="menus-submenu">
                <a href="#" class="menus-item">
                    <img src="./Pikachu.jpeg" alt="icon">
                    <div class="menus-text">菜单项4</div>
                    <i class="iconfont iconxia"></i>
                </a>
                <ul class="menus-list">
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项1</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项2</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项3</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项4</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项5</div>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="menus-item">
                            <div class="menus-text">子菜单项6</div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="menus-nosubmenu">
                <a href="#" class="menus-item">
                    <img src="./Pikachu.jpeg" alt="icon">
                    <div class="menus-text">无子菜单项1</div>
                    <i class="iconfont icondelete"></i>
                </a>
            </li>
            <li class="menus-nosubmenu">
                <a href="#" class="menus-item">
                    <img src="./Pikachu.jpeg" alt="icon">
                    <div class="menus-text">无子菜单项2</div>
                    <i class="iconfont icondelete"></i>
                </a>
            </li>
            <li class="menus-nosubmenu">
                <a href="#" class="menus-item">
                    <img src="./Pikachu.jpeg" alt="icon">
                    <div class="menus-text">无子菜单项3</div>
                    <i class="iconfont icondelete"></i>
                </a>
            </li>
        </ul>
    </div>

    <script>
        // 有子菜单的项（包括菜单项和子菜单列表）
        let subMenus = document.querySelectorAll('.menus-submenu')
        // 菜单项的 上/下 箭头
        let subMenusItemIcon = document.querySelectorAll('.menus-submenu .menus-item > .iconfont')
        // 菜单项X
        let subMenusItems = document.querySelectorAll('.menus-submenu > .menus-item')
        // 子菜单列表
        let subMenusList = document.querySelectorAll('.menus-submenu > .menus-list')
        // 没有子菜单的项
        let noSubMenusItems = document.querySelectorAll('.menus-nosubmenu')
        // 当前展开的菜单项索引
        let expandedIndex = 0
        // 当前选择的 子菜单项 的 父菜单项 索引
        let selectedParentIndex = 0
        // 当前选择的子菜单项索引
        let selectedSubIndex = 0
        // 当前选择的 没有子菜单的项 的索引
        let selectedNoIndex = -1

        function closeExpanded(index) {
            // 关闭展开
            subMenusItemIcon[index].classList.remove('iconshang')
            subMenusItemIcon[index].classList.add('iconxia')
            subMenus[index].classList.remove('expanded-list')
        }
        function clearSelected() {
            // 清除选中项
            // 选中项有子菜单时
            if ( -1 != selectedParentIndex ) {
                subMenusList[selectedParentIndex].getElementsByTagName('li')[selectedSubIndex].classList.remove('selected-items')
                subMenus[selectedParentIndex].classList.remove('selected-items')
            }
            // 选中项没有子菜单时
            else {
                noSubMenusItems[selectedNoIndex].classList.remove('selected-items')
            }
        }

        function initListeners() {
            // 点击响应：菜单项展开
            for (let index = 0; index < subMenusItems.length; index++) {
                subMenusItems[index].addEventListener('click', function(e) {
                    // 当前点击的没有展开 并且 存在展开的, 关闭当前展开的
                    if ( index != expandedIndex && -1 != expandedIndex) {
                        closeExpanded(expandedIndex)
                    }
                    subMenusItemIcon[index].classList.toggle('iconshang')
                    subMenusItemIcon[index].classList.toggle('iconxia')

                    // 判断点击的是否已经展开
                    if ( !subMenus[index].classList.toggle('expanded-list')) {
                        // 点击的就是展开的，关闭展开
                        expandedIndex = -1
                        // 选中的项 是否是当前点击的子项
                        if(index == selectedParentIndex) {
                            subMenus[index].classList.add("selected-items")
                        }
                    }
                    else {
                        // 点击的是其他
                        expandedIndex = index
                        // 选中的项 是否是当前点击的子项
                        if(index == selectedParentIndex) {
                            subMenus[selectedParentIndex].classList.remove("selected-items")
                        }
                        else if( -1 != selectedParentIndex) {
                            subMenus[selectedParentIndex].classList.add("selected-items")
                        }
                    }
                })
            }
            // 点击响应：子菜单项选中
            for (let index = 0; index < subMenusList.length; index++) {
                let subMenuLi = subMenusList[index].getElementsByTagName('li')
                for (let j = 0; j < subMenuLi.length; j++) {
                    subMenuLi[j].addEventListener('click', function(e) {
                        if ( !subMenuLi[j].classList.contains('selected-items')) {
                            // 清除选择
                            clearSelected()

                            subMenuLi[j].classList.add('selected-items')
                            selectedParentIndex = index
                            selectedSubIndex = j
                        }
                    })                    
                }
            }
            // 点击响应：无二级菜单的菜单项选中
            for (let index = 0; index < noSubMenusItems.length; index++) {
                noSubMenusItems[index].addEventListener("click", function(e){
                    if ( !this.classList.contains('selected-items') ) {
                        // 清除选择
                        clearSelected()
                        // 如果有展开，关闭展开
                        if( -1 != expandedIndex && subMenus[expandedIndex].classList.contains('expanded-list')) {
                            closeExpanded(expandedIndex)
                        }
                        this.classList.add('selected-items')
                        selectedNoIndex = index
                        selectedParentIndex = -1
                    }
                })      
            }
        }

        initListeners()
    </script>
</body>
</html>